<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 基本信息
                </el-breadcrumb-item>
                <el-breadcrumb-item>添加信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="">
                    </el-form-item>
                    <el-form-item label="信息姓名">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="就读学校">
                        <el-input v-model="form.school"></el-input>
                    </el-form-item>
                    <el-form-item label="学习方向">
                        <el-cascader :options="optionsbook" v-model="form.optionsbook"></el-cascader>
                    </el-form-item>
                    <el-form-item label="上课时间">
                        <el-col :span="11">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="form.date1"
                                value-format="yyyy-MM-dd"
                                style="width: 100%;"
                            ></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="2">-</el-col>
                        <el-col :span="11">
                            <el-time-picker
                                placeholder="选择时间"
                                v-model="form.date2"
                                style="width: 100%;"
                            ></el-time-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="学习城市">
                        <el-cascader :options="options" v-model="form.options"></el-cascader>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" rows="5" v-model="form.desc"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <!-- <el-checkbox v-model="form.delivery"></el-checkbox> -->
                        <!-- <el-checkbox v-model="checked1" disabled></el-checkbox> -->
                        <el-checkbox label="" value="true" v-model="checkList" disabled></el-checkbox>
                        
                        <el-button
                            type="text"
                            style="fontSize:15px"
                            @click="centerDialogVisible = true"
                        >《关于学生保证书...》</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-dialog
            :visible.sync="centerDialogVisible"
            width="50%"
            center>
            <h1>{{$t('i18n.title')}}</h1>
            <div>
                <el-breadcrumb-item><i class="el-icon-lx-global"></i> {{$t('i18n.breadcrumb')}}</el-breadcrumb-item>
            </div>
            <div style="text-align:right">
                <el-button type="primary" @click="$i18n.locale = $i18n.locale === 'zh'?'en':'zh';">{{$t('i18n.btn')}}</el-button><br>
            </div>
            <div class="list">
            <h3>{{$t('i18n.title1')}}</h3>
                <p>{{$t('i18n.p1')}}</p>
                <p>{{$t('i18n.p2')}}</p>
                <p>{{$t('i18n.p3')}}</p>
                <p>{{$t('i18n.p4')}}</p>
                <p>{{$t('i18n.p5')}}</p>
                <p>{{$t('i18n.p6')}}</p>
                <p>{{$t('i18n.p7')}}</p>
                <p>{{$t('i18n.p8')}}</p>
                <p>{{$t('i18n.p9')}}</p>
                <p>{{$t('i18n.p10')}}</p>
                <p>{{$t('i18n.p11')}}</p>
            <h3>{{$t('i18n.title2')}}</h3>
                <p>{{$t('i18n.p12')}}</p>
                <p>{{$t('i18n.p13')}}</p>
                <p>{{$t('i18n.p14')}}</p>
                <p>{{$t('i18n.p15')}}</p>
                <p>{{$t('i18n.p16')}}</p>
            </div>
            <br>
            <div style="text-align:right;margin-right:80px"><el-checkbox v-model="checkList" label='' @change="change">{{$t('i18n.p25')}}</el-checkbox></div>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="centerDialogVisible = false">取 消</el-button> -->
                <el-button v-shake type="primary" @click="centerDialogVisible = false">{{$t('i18n.p26')}}</el-button>
            </span>
            
        </el-dialog>
    </div>
</template>

<script>
export default {    
    name: 'baseform',
    data() {
        return {
            checked: false,
            centerDialogVisible: false,
            options: [
                {
                    value: 'guangdong',
                    label: '广东省',
                    children: [
                        {
                            value: 'guangzhou',
                            label: '广州市',
                            children: [
                                {
                                    value: 'tianhe',
                                    label: '天河区'
                                },
                                {
                                    value: 'haizhu',
                                    label: '海珠区'
                                }
                            ]
                        },
                        {
                            value: 'dongguan',
                            label: '东莞市',
                            children: [
                                {
                                    value: 'changan',
                                    label: '长安镇'
                                },
                                {
                                    value: 'humen',
                                    label: '虎门镇'
                                }
                            ]
                        }
                    ]
                },
                {
                    value: 'hunan',
                    label: '湖南省',
                    children: [
                        {
                            value: 'changsha',
                            label: '长沙市',
                            children: [
                                {
                                    value: 'yuelu',
                                    label: '岳麓区'
                                }
                            ]
                        }
                    ]
                },{
                    value: 'shanxisheng',
                    label: '陕西省',
                    children: [
                        {
                            value: 'xianshi',
                            label: '西安市',
                            children: [
                                {
                                    value: 'tianhe',
                                    label: '未央区'
                                },
                                {
                                    value: 'haizhu',
                                    label: '雁塔区'
                                }
                            ]
                        }
                    ]
                },{
                    value: 'chonqinshi',
                    label: '重庆市',
                    children: [
                        {
                            value: 'yubeiqu',
                            label: '渝北区',
                            
                        },{
                            value: 'yuzhongqu',
                            label: '渝中区',
                            
                        },{
                            value: 'shapingbaqu',
                            label: '沙坪坝区',
                            
                        },{
                            value: 'hechuanqu',
                            label: '合川区',
                            
                        }
                    ]
                },{
                    value: 'heilongjiangsheng',
                    label: '黑龙江省',
                    children: [
                        {
                            value: 'haerbinshi',
                            label: '哈尔滨市',
                            children: [
                                {
                                    value: 'songbeiqu',
                                    label: '松北区'
                                },{
                                    value: 'hulanqu',
                                    label: '呼兰区'
                                },{
                                    value: 'xiangfangqu',
                                    label: '香坊区'
                                }
                            ]
                        },{
                            value: 'mudanjiangshi',
                            label: '牡丹江市',
                            children: [
                                {
                                    value: 'xianqu',
                                    label: '西安区'
                                },{
                                    value: 'aimingqu',
                                    label: '爱民区'
                                }
                            ]
                        }
                    ]
                }
            ],
            optionsbook:[
                {
                    value: 'web qianduan',
                    label: 'web前端',
                    children: [
                        {
                            value: 'bianchengyuyan',
                            label: '编程语言',
                            children: [
                                {
                                    value: 'HTML',
                                    label: 'HTML'
                                },
                                {
                                    value: 'CSS',
                                    label: 'CSS'
                                },
                                {
                                    value: 'JavaScript',
                                    label: 'JavaScript'
                                },
                                {
                                    value: 'node.js',
                                    label: 'node.js'
                                },
                                {
                                    value: 'Zepto.js',
                                    label: 'Zepto.js'
                                },
                                {
                                    value: 'TypeScript',
                                    label: 'TypeScript'
                                },
                                {
                                    value: 'Webpack',
                                    label: 'Webpack'
                                }
                            ]
                        },
                        {
                            value: 'qianduankuangjia',
                            label: '前端框架',
                            children: [
                                {
                                    value: 'jQuery',
                                    label: 'jQuery'
                                },
                                {
                                    value: 'Bootstrap',
                                    label: 'Bootstrap'
                                },
                                {
                                    value: 'Angular.jS',
                                    label: 'Angular.jS'
                                },
                                {
                                    value: 'vue2/vue3/vueX',
                                    label: 'vue2/vue3/vueX'
                                },
                                {
                                    value: 'React',
                                    label: 'React'
                                }
                            ]
                        }
                    ]
                },
                {
                    value: 'houduan',
                    label: '后端',
                    children: [
                        {
                            value: 'java',
                            label: 'java',
                            children: [
                                {
                                    value: 'javaSE',
                                    label: 'javaSE'
                                },
                                {
                                    value: 'javaweb',
                                    label: 'javaweb'
                                },
                                {
                                    value: 'Maven',
                                    label: 'Maven'
                                },
                                {
                                    value: 'SSM框架',
                                    label: 'SSM框架 '
                                },
                                {
                                    value: 'MYbatisPlus',
                                    label: 'MYbatisPlus'
                                },
                                {
                                    value: 'SpringBoot',
                                    label: 'SpringBoot'
                                },
                                {
                                    value: 'Docker',
                                    label: 'Docker'
                                }
                            ],
                        },{
                            value: 'c++',
                            label: 'c++',
                            children: [
                                {
                                    value: 'cyuyan',
                                    label: 'c语言程序设计基础'
                                },
                                {
                                    value: 'c++',
                                    label: 'c++'
                                },
                                {
                                    value: 'linux',
                                    label: 'linux'
                                }
                            ],
                        },{
                            value: 'python',
                            label: 'python',
                            children: [
                                {
                                    value: 'python',
                                    label: 'python'
                                },
                                {
                                    value: 'Hadoop',
                                    label: 'Hadoop'
                                },
                                {
                                    value: 'spark3.2',
                                    label: 'spark3.2'
                                },{
                                    value: 'pythonpeople',
                                    label: 'python人像识别技术'
                                }
                            ]
                        }
                    ]
                },
                {
                    value: 'kehuduan',
                    label: '客户端',
                    children: [
                        {
                            value: 'android app',
                            label: 'android app开发',
                        },
                        {
                            value: 'ios app',
                            label: 'ios app开发',
                        },
                        {
                            value: 'mac',
                            label: 'mac 应用开发',
                        }
                    ]
                },
                {
                    value: 'qita',
                    label: '其他',
                    children: [
                        {
                            value: 'shujiku',
                            label: '数据库',
                        },{
                            value: 'Git',
                            label: 'Git',
                        },{
                            value: 'jisuanjizuzhiyujiegou',
                            label: '计算机组织与结构',
                        },{
                            value: 'shujujiegou',
                            label: '数据结构',
                        },{
                            value: 'jisuanjiwangluo',
                            label: '计算机网络',
                        },{
                            value: 'caozuoxitong',
                            label: '操作系统',
                        }
                    ]
                }
            ],
            form: {
                name: '',
                school: '',
                region: '',
                date1: '',
                date2: '',
                delivery: true,
                // type: ['步步高'],
                // resource: '小天才',
                desc: '',
                options: [],
                optionsbook: []
            }
        };
    },
    methods: {
        onSubmit() {
            if(this.checkList == true){
                this.$message.success('提交成功！');
            }else{
                this.$message.error('提交失败！请勾选学生保证书');
            }
        },
        // setSize:function () {
        //     // 通过浏览器宽度(图片宽度)计算高度
        //     this.bannerHeight = 400 / 1920 * this.screenWidth;
        // },
        change(){
        this.count++
        //复选框勾选动作为取消勾选时
        if(this.count%2==0){
            if(this.checkList.includes('复选框 B')){
            this.checkList.pop('复选框 B')
            }
        }
        else if(this.count%2==1){
            if(this.checkList.includes('复选框 B')){
            //this.checkList.push('复选框C')
            }
            else{
            this.checkList.push('复选框 B')
            }
        }
        if(this.count>=2){
            this.count=0
        }
        }
    },
    // mounted() {
    //     // 首次加载时,需要调用一次
    //     this.screenWidth =  window.innerWidth;
    //     this.setSize();
    //     // 窗口大小发生改变时,调用一次
    //     window.onresize = () =>{
    //         this.screenWidth =  window.innerWidth;
    //         this.setSize();
    //     }
    // }
};
</script>

<style>
p {
    font-size: 15px;
}
h1 {
    text-align: center;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.1;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  img {
	max-width: 100%;
	max-height: 100%;
}

</style>